<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<head>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/estilos_app.css" type="text/css"> 
   	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/cssverticalmenu.css" />
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/cssverticalmenu.js"></script>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style>
html, body {
margin:0;
padding:0;
}

#wrapper {
width:100%;
float: right; /* swap */
margin-left:-180px; /* swap */
}

#content {
margin-left: 270px; /* swap */
background: #ddd;
} 

#nav {
width: 180px;
float: right;
}

</style>
<style type="text/css">    
           
            
           
            

            #gallery {
                border: 10px solid #1D0C16;
                overflow: visible;                
                
                
                overflow: visible;
                background: #272229;
                /* box shadow effect in Safari and Chrome*/
                -webkit-box-shadow: #272229 10px 10px 20px;
                /* box shadow effect in Firefox*/
                -moz-box-shadow: #272229 10px 10px 20px;
                /* box shadow effect in IE*/
                filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
                /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
                 box-shadow: #272229 10px 10px 20px;
            
            }
          
		  
            #gallery ul{
               /* This position the ul content in the middle of the gallery*/
               margin-left:-30px; 
            }
       
       
            #gallery ul li {
                /* In order to create the proper effect with hover we should use display inline-table
                    This will display the big picture right next to its thumbnail
                */
                list-style:none; display:inline-table; padding:10px;
            }
                 
                 
            /* This is the pic to display when the hover action occur over the li that contains the thumbnail  */
            #gallery ul li .pic{
                /* Animation with transition in Safari and Chrome */
               -webkit-transition: all 0.6s ease-in-out;
               /* Animation with transition in Firefox (No supported Yet) */
               -moz-transition: all 0.6s ease-in-out;
               /* Animation with transition in Opera (No supported Yet)*/
               -o-transition: all 0.6s ease-in-out;
                /* The the opacity to 0 to create the fadeOut effect*/
               opacity:0;
               visibility:hidden; 
               position:absolute; 
               margin-top:10px; 
               margin-left:-20px; 
               border:1px solid black;
               /* box shadow effect in Safari and Chrome*/
               -webkit-box-shadow:#272229 2px 2px 10px;
                /* box shadow effect in Firefox*/
               -moz-box-shadow:#272229 2px 2px 10px;
               /* box shadow effect in IE*/
               filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
                 /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
               box-shadow:#272229 2px 2px 10px;
            }
            

            #gallery ul li .mini:hover{
                cursor:pointer;
            }
            
            
            /* This create the desired effect of showing the imagen when we mouseover the thumbnail*/
           #gallery ul li:hover .pic {
                /* width and height is how much the picture is going to growth with the effect */
                width:200px; 
                height:200px;
                opacity:1; 
                visibility:visible; 
                float:right;
            }
                
        </style>

</head>
<body>
<div class="notTransparent" id="divIntro">
		
       		<div id="gallery">
            <ul>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen1.jpg" class="mini" width="50" height="50" /><img src="<%=request.getContextPath()%>/images/garden/imagen1.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen2_small.jpg" class="mini" width="50" height="50" /><img src="<%=request.getContextPath()%>/images/garden/imagen2.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen3_small.jpg" class="mini" width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen3.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen4_small.jpg" class="mini"  width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen4.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen5_small.jpg" class="mini" width="50" height="50" /><img src="<%=request.getContextPath()%>/images/garden/imagen5.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen6_small.jpg" class="mini" width="50" height="50"  /><img src="<%=request.getContextPath()%>/images/garden/imagen6.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen7_small.jpg" class="mini" width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen7.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen8_small.jpg" class="mini" width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen8.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen9_small.jpg" class="mini" width="50" height="50" /><img src="<%=request.getContextPath()%>/images/garden/imagen9.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen10_small.jpg" class="mini" width="50" height="50" /><img src="<%=request.getContextPath()%>/images/garden/imagen10.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen11_small.jpg" class="mini" width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen11.jpg" class="pic"  />
                </li>
                <li>
                    <img src="<%=request.getContextPath()%>/images/garden/imagen12_small.jpg" class="mini" width="50" height="50" alt="" /><img src="<%=request.getContextPath()%>/images/garden/imagen12.jpg" class="pic"  />
                </li>
            </ul>
        </div>
        
</div>
<div id="wrapper">
<div id="content">
<img src="<%=request.getContextPath()%>/images/fotoJanela.jpg" height="700px"></img>

</div>
</div>

<div id="nav">
<img src="<%=request.getContextPath()%>/images/topLeft.jpg"></img><p></p><p></p>
<%@ include file="include.jsp"%>
</div>

</body>
</html> 